<template>
  <view class="container">
		<scroll-view scroll-y="true" class="mt-scroll" :style="{'height': heightScroll}">
			<view class="header">
				<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/demandHeader.png"></image>
			</view>
			<view class="content">
				<view class="cu-form-group">
					<view class="title"><text style="color: #FF6161; font-size: 36rpx;">*</text> 需求类型</view>
					<chose-cate @change1="cateName" :cateList="cateList">
						<view class="picker" style="color: #999;">
							{{categoryName}}
						</view>
					</chose-cate>
				</view>
				<view class="cu-form-group align-start solid-bottom">
					<view class="title"><text style="color: #FF6161; font-size: 36rpx;">*</text> 需求描述</view>
					<textarea maxlength="-1" v-model="demandDes" placeholder="请尽可能的详细描述您的需求~"></textarea>
				</view>
				<view class="cu-bar bg-white">
					<view class="action" style="color: #333;">
						上传图片
					</view>
					<view class="action">
						{{imgList.length}}/5
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						 <image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<5">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">需求预算(元)</view>
					<input :placeholder="priceStatus?'具体价格请面议':'请输入'" name="input" v-model="demandPrice" type="digit" :disabled="priceStatus"></input>
					<view style="color: #FF6161;" @click="changePrice">{{priceStatus?'价格': '面议'}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title"><text style="color: #FF6161; font-size: 36rpx;">*</text> 截止时间</view>
					<picker mode="date" :value="date" :start="startDate"  @change="DateChange">
						<view class="picker" style="color: #999;">
							{{demandDate}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title"><text style="color: #FF6161; font-size: 36rpx;">*</text> 服务地址</view>
					<view @click="showCityList = true">
						<chose-region @change1="regionName" :disabled="true">
							<view class="picker" style="color: #999;">
								{{cityName}}
							</view>
						</chose-region>
					</view>
					<!-- <view class="picker" style="color: #999;">
						{{cityName}}
					</view> -->
				</view>
			</view>
		</scroll-view>
		<view class="bottom-area">
			<view class="bottom-btn">
				<view class="btn" @click="subDemand">
					<text>发布任务</text>
				</view>
			</view>
			<view v-if="wechatShow" class="wechat-area">
				<view class="left-area">
					<text class="cuIcon-close" @click="closeWechat"></text>
					<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/New-my/weixinlogo.png" class="wechat-img"></image>
					<text class="wechat-text">关注公众号，时刻获取消息通知</text>
				</view>
				<view class="right-area" @click="goWechat">
					去开启
				</view>
			</view>
		</view>
		<view v-if="showCityList">
			<u-popup :show="showCityList" @close="closeCityList">
				<view class="city_list">
					<choseAddr @getCityInfo="getCityInfo"></choseAddr>
				</view>
			</u-popup>
		</view>
  </view>
</template>

<script>
import homeApi from "@/api/home.js"
import demandApi from "@/api/demand.js"
import choseRegion from '@/components/chose-region/chose-region.vue'
import choseCate from "@/components/chose-cate/chose-cate.vue"
import choseAddr from '@/components/WF-address/WF-address.vue'
export default {
	components: {
		choseRegion,
		choseCate,
		choseAddr
	},
  data() {
    return {
			imgList: [],
			categoryName: '请选择',
			cateFirstId: '',
			cateSecondId: '',
			cateThirdId: '',
			demandDate: '请选择',
			cityName: '请选择',
			subCityName: '',
			cityCode: '',
			cateList: [],
			cateIndex: [0, 0, 0],
			demandPrice: '',
			demandDes: '',
			startDate: '',
			priceStatus: false,
			wechatShow: true,
			heightScroll: 'calc(100vh - 200rpx)',
			showCityList: false
		};
  },
	onLoad() {
		this.getAllCate()
		
	},
	onShow() {
		this.startDate = this.$moment().add(1, 'days').format('YYYY-MM-DD')
		this.demandDate = this.$moment().add(3, 'days').format('YYYY-MM-DD')
		if(uni.getStorageSync('userInfo').official_openid) {
			this.wechatShow = false
		}
	},
	methods: {
		//展示区域搜索
		showAddr() {
			this.showCityList = true
		},
		
		closeCityList() {
			this.showCityList = false
			this.cityName = '请选择'
			this.cityCode = ''
		},
		
		getCityInfo(val) {
			console.log(val)
			this.cityCode = val.id
			this.cityName = val.name
			this.showCityList = false
		},
		
		//跳转关注公众号
		goWechat() {
			uni.navigateTo({
				url: '/pagesPersonal/attentionWechat/attentionWechat'
			})
		},
		
		//关闭公众号
		closeWechat() {
			this.wechatShow = false
			this.heightScroll = 'calc(100vh - 112rpx)'
		},
		
		//获取全部需求类型
		getAllCate() {
			homeApi.getServiceCate().then(res => {
				if(res.code === 1) {
					this.cateList = res.data
					console.log(this.cateList)
				}else {
					this.$common.msgShow(res.msg)
				}
			})
		},
		
		//价格面议的切换
		changePrice() {
			this.priceStatus = !this.priceStatus
		},
		
		//图片上传
		ChooseImage() {
			uni.chooseImage({
				count: 5, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: (res) => {
					if (res.tempFilePaths.length > 0) {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							this.imgUpload(res.tempFilePaths[i]);
							uni.showLoading({
								title: '上传中'
							});
						}
					}
				}
			});
		},
		//获取OSS图片数据
		imgUpload(img) {
			homeApi.uploadImg(img).then(res => {
				console.log(res)
				if (res.code === 1) {
					this.imgList.push(res.data.fullurl)
					uni.hideLoading();
				} else {
					this.$common.msgShow(res.msg);
				}
			})
		},
		//展示图片
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		//删除图片
		DelImg(e) {
			uni.showModal({
				title: '温馨提示',
				content: '确定要删除此图片？',
				cancelText: '再想想',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1)
					}
				}
			})
		},
		
		//需求类型选择
		cateName(e) {
			console.log(e)
			this.categoryName = e[1].name
			this.cateFirstId = e[0].id
			this.cateSecondId = e[1].id
			// this.cateThirdId = e[2].id
		},
		
		//地址选择
		regionName(e) {
			console.log(e)
			this.cityName = e[0].name + '/' + e[1].name
			this.subCityName = e[1].name
			this.cityCode = e[1].id
		},
		
		//截止日期选择
		DateChange(e) {
			this.demandDate = e.detail.value
		},
		
		//发布任务需求
		async subDemand() {
			if(!this.cateFirstId) {
				this.$common.msgShow('请选择需求类型')
				return
			}
			if(!this.demandDes) {
				this.$common.msgShow('请填写需求描述')
				return
			}
			if(!this.demandDate) {
				this.$common.msgShow('请选择截止时间')
				return
			}
			if(!this.cityCode) {
				this.$common.msgShow('请选择服务地址')
				return
			}
			let obj = {
				one_cate_id: this.cateFirstId,
				two_cate_id: this.cateSecondId,
				third_cate_id: this.cateThirdId,
				describe: this.demandDes,
				money: this.priceStatus?0:this.demandPrice,
				end_time:this.$moment(this.demandDate).valueOf()/1000,
				city_code: this.cityCode,
				city_name: this.cityName,
				annex: this.imgList.join(',')
			}
			console.log(obj)
			let res = await demandApi.addDemand(obj) 
			if(res.code === 1) {
				this.imgList = []
				this.cityName = '请选择'
				this.demandDate = '请选择'
				this.categoryName = '请选择'
				this.demandDes = ''
				this.demandPrice = ''
				this.priceStatus = false
				this.$common.msgShow('发布成功')
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pagesDemand/demandList/demandList'
					})
				}, 500)
			}else {
				this.$common.msgShow(res.msg)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	@import "postDemand.scss";
</style>
